<!DOCTYPE html>
<html>
<head>
<?php include_once VIEWS.'inc/head.php'; ?>
<?php
	echo static_file('web/css/swiper-3.3.1.min.css');
	echo static_file('web/js/swiper-3.3.1.min.js');;
	echo static_file('web/css/flexslider.css');
	echo static_file('web/js/jquery.flexslider-min.js');
	echo static_file('web/js/jquery.lazyload.min.js');
	
?>
</head>

<body>
	<div class="main">
		<?php include_once VIEWS.'inc/header.php'; ?>
		<section class="welcome">
			<div class="banner wow fadeInUp">
				<div class="flexslider">
				  	<ul class="slides">
				    	<li style="background:url(<?php echo static_file('web/img/banner1.jpg')?>) no-repeat center center;background-size:cover;">
					    	<a href="javascript:;">
					    		<img src="<?php echo static_file('web/img/banner1.jpg')?>" alt="四季沐歌">
					    	</a>
				    	</li>
				    	<li style="background:url(<?php echo static_file('web/img/banner1.jpg')?>) no-repeat center center;background-size:cover;">
					    	<a href="javascript:;">
					    		<img src="<?php echo static_file('web/img/banner1.jpg')?>" alt="四季沐歌">
					    	</a>
				    	</li>
				    	<li style="background:url(<?php echo static_file('web/img/banner1.jpg')?>) no-repeat center center;background-size:cover;">
					    	<a href="javascript:;">
					    		<img src="<?php echo static_file('web/img/banner1.jpg')?>" alt="四季沐歌">
					    	</a>
				    	</li>
				  	</ul>
				</div>
			</div>
			<div class="index_themes wow fadeInUp">
				<div class="w1680">
					<div class="themes">
						<ul>
							<li>
								<a href="">
									<div class="pic">
										<img src="<?php echo static_file('web/img/index_themes_img1.jpg')?>" alt="四季沐歌">
									</div>
									<div class="text">
										<div class="tit">热水生活馆</div>
										<div class="txt">
											集成热水、净水、采暖系统为一体。
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="pic">
										<img src="<?php echo static_file('web/img/index_themes_img2.jpg')?>" alt="四季沐歌">
									</div>
									<div class="text">
										<div class="tit">净水科技馆</div>
										<div class="txt">
											为您提供环保、智能、舒适的品位生活。
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="pic">
										<img src="<?php echo static_file('web/img/index_themes_img3.jpg')?>" alt="四季沐歌">
									</div>
									<div class="text">
										<div class="tit">分布式光伏电站</div>
										<div class="txt">
											为客户创造性地提供有价值的服务。
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="pic">
										<img src="<?php echo static_file('web/img/index_themes_img4.jpg')?>" alt="四季沐歌">
									</div>
									<div class="text">
										<div class="tit">工程解决方案</div>
										<div class="txt">
											清洁能源、热水采暖专家。
										</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="index_about">
						<div class="padding">
							<a href="" class="bocweb-logo">
								<img src="<?php echo static_file('web/img/index_logo.jpg')?>" alt="四季沐歌">
							</a>
							<h4>
								集成热水专家 <span>专注热水18年</span>
							</h4>
							<div class="tit">
								关于我们
							</div>
							<div class="text">
								四季沐歌是沪市A股主板上市企业（股票代码：603366）、中国航天事业战略合作伙伴、中国驰名商标、中国集成热水专家。四季沐歌专注热水18年，致力于“建立热水新标准、升级热水新体验”...
							</div>
							<a href="" class="more">see more</a>
						</div>
					</div>
				</div>
			</div>
			<div class="index_usefulness wow fadeInUp">
				<div class="w1680">
					<div class="pic">
						<div class="household">
							<img src="<?php echo static_file('web/img/household.jpg')?>" alt="家用">
						</div>
						<div class="commercial">
							<img src="<?php echo static_file('web/img/household.jpg')?>" alt="商用">
						</div>
					</div>
					<div class="mark"></div>
					<div class="tabs">
						<a href="javascritp:;" class="house"><span>&nbsp;&nbsp;家用</span></a>
						<a href="javascritp:;" class="commer"><span>商用&nbsp;&nbsp;</span></a>
					</div>
				</div>
			</div>
			<div class="index_news wow fadeInUp">
				<div class="w1680">
					<div class="tit">新闻中心</div>
					<div class="line"></div>
					<div class="con">
						<div class="left">
							<ul>
								<li class="li">
									<a href="">
										<div class="pic">
											<img src="<?php echo static_file('web/img/index_news_img1.jpg')?>" alt="四季沐歌">
										</div>
										<div class="text">
											<div class="tits">
												实力问鼎 四季沐歌集成热水机和净饮机双双...
											</div>
											<div class="txt">
												3月10日，在备受全球家电界瞩目的AWE 2018上，中国家电艾普兰大奖正式揭晓。四季沐歌最新推出的集成热水机一举斩获颇具...
											</div>
											<div class="time">
												2018-03-14
											</div>
										</div>
									</a>
								</li>
								<li class="li">
									<a href="">
										<div class="pic">
											<img src="<?php echo static_file('web/img/index_news_img2.jpg')?>" alt="四季沐歌">
										</div>
										<div class="text">
											<div class="tits">
												实力问鼎 四季沐歌集成热水机和净饮机双双...
											</div>
											<div class="txt">
												3月10日，在备受全球家电界瞩目的AWE 2018上，中国家电艾普兰大奖正式揭晓。四季沐歌最新推出的集成热水机一举斩获颇具...
											</div>
											<div class="time">
												2018-03-14
											</div>
										</div>
									</a>
								</li>
							</ul>

							<div class="swiper_news">
								<div class="swiper-container">
									<div class="swiper-wrapper">
										<div class="swiper-slide">
											<a href="<?php echo site_url('about/news/detail'); ?>">
												<div class="pic">
													<img src="<?php echo static_file('web/img/index_news_img1.jpg')?>" alt="">
												</div>
												<div class="cont">
													<div class="conn">
														<div class="t">实力问鼎 四季沐歌集成热水机和净饮机双双...</div>
														<div class="con">
															3月10日，在备受全球家电界瞩目的AWE 2018上，中国家电艾普兰大奖正式揭晓。四季沐歌最新推出的集成热水机一举斩获颇具含金量的“2018艾普兰大奖”，为热水器行业树立新的标杆。同时，四季沐歌净饮机荣获“2018艾普兰金口碑奖”...
														</div>
														<div class="time">
															2018-03-14
														</div>
													</div>
												</div>
											</a>
										</div>
										<div class="swiper-slide">
											<a href="<?php echo site_url('about/news/detail'); ?>">
												<div class="pic">
													<img src="<?php echo static_file('web/img/index_news_img1.jpg')?>" alt="">
												</div>
												<div class="cont">
													<div class="conn">
														<div class="t">实力问鼎 四季沐歌集成热水机和净饮机双双...</div>
														<div class="con">
															3月10日，在备受全球家电界瞩目的AWE 2018上，中国家电艾普兰大奖正式揭晓。四季沐歌最新推出的集成热水机一举斩获颇具含金量的“2018艾普兰大奖”，为热水器行业树立新的标杆。同时，四季沐歌净饮机荣获“2018艾普兰金口碑奖”...
														</div>
														<div class="time">
															2018-03-14
														</div>
													</div>
												</div>
											</a>
										</div>
									</div>
									<div class="swiper-pagination"></div>
								</div>
							</div>
						</div>
						<div class="right" style="background:url(<?php echo static_file('web/img/index_merchants_img.jpg')?>) no-repeat center center;background-size:cover;">
							<img src="<?php echo static_file('web/img/index_merchants_img.jpg')?>" alt="">
						</div>
					</div>
				</div>
			</div>
		</section>
    	<?php include_once VIEWS.'inc/footer.php'; ?>
	</div>
<script>
	$(function(){
		
		var WinW = $(window).width();
		var WinH = $(window).height();
		if (WinW < 1024) {
			$('.banner').css('height',WinW*0.6268)
		}
		
		// 一级导航
		$('header .bocweb-nav ul li').eq(0).addClass('active');
		// banner
		var Slider_num = 0;
		var SliderLil = $('.flexslider .slides li').length;
		$(".flexslider").flexslider({
			animation: "fade",
			animationLoop: true,
			slideshow: true,
			slideshowSpeed: 5000,
			touch:true,
			pauseOnHover:true,
		});
		$("img").lazyload({effect: "fadeIn"});
		// index_themes
		var ThImgW = $('.index_themes .themes li').width();
		$('.index_themes .themes li .pic').height(ThImgW*0.7857);

		// index_usefulness
		var useImgW = $('.index_usefulness .w1680').width();
		$('.index_usefulness .w1680 .pic>div').height(useImgW*0.4708);
		var useTabW = $('.index_usefulness .w1680 .tabs').width();
		var useTabAW = $('.index_usefulness .w1680 .tabs a').outerWidth();
		$('.index_usefulness .w1680 .tabs').height(useTabW*0.5584).css('margin-top',-useTabW*0.5584/2);
		$('.index_usefulness .w1680 .tabs a').css({'height':useTabAW*1.1167+'px'});

		$('.index_usefulness .w1680 .tabs a').click(function(){
			$(this).parent().siblings('.mark').hide();
			$(this).addClass('active').siblings().removeClass('active')
		})

		// index_news
		var NewsW = $('.index_news .con .left li').width();
		$('.index_news .con .left li .pic').height(NewsW*0.6102);
		
		$('.swiper_news .swiper-slide .pic').height(Math.floor($('.swiper_news .swiper-slide').width()*(310/508)));
	  	$(window).resize(function(){
	  		WinW = $(window).width();
			WinH = $(window).height();
			if (WinW < 1024) {
				$('.banner').css('height',WinW*0.6268)
			}
			$('.swiper_news .swiper-slide .pic').height(Math.floor($('.swiper_news .swiper-slide').width()*(310/508)));
			// index_themes
			ThImgW = $('.index_themes .themes li').width();
			$('.index_themes .themes li .pic').height(ThImgW*0.7857);

			// index_usefulness
			useImgW = $('.index_usefulness .w1680').width();
			$('.index_usefulness .w1680 .pic>div').height(useImgW*0.4708);
			useTabW = $('.index_usefulness .w1680 .tabs').width();
			useTabAW = $('.index_usefulness .w1680 .tabs a').outerWidth();
			$('.index_usefulness .w1680 .tabs').height(useTabW*0.5584).css('margin-top',-useTabW*0.5584/2);
			$('.index_usefulness .w1680 .tabs a').css({'height':useTabAW*1.1167+'px'});

			// index_news
			NewsW = $('.index_news .con .left li').width();
			$('.index_news .con .left li .pic').height(NewsW*0.6102);
	  	})
	})

</script>
</body>
</html>

<script>
	$(function(){
		var mySwiper = new Swiper('.swiper_news .swiper-container',{
			pagination : '.swiper-pagination',
			spaceBetween : 10,
			slidesPerView : 1,
		})


		var t_img;
		var isLoad = true; 

		var h;
		isImgLoad(function(){
			h=$('.li').height();
			$('.index_news .con .right').height(h);
			if($(window).width()<500){
				$('.index_news .con .right').height(Math.floor($('.index_news .con .right img').width()*(484/586)));
			}

			$(window).resize(function(){
				h=$('.li').height();
				$('.index_news .con .right').height(h);
				if($(window).width()<500){
					$('.index_news .con .right').height(Math.floor($('.index_news .con .right img').width()*(484/586)));
				}
			})
		});

		// 判断图片加载的函数
		function isImgLoad(callback){
		    // 注意我的图片类名都是cover，因为我只需要处理cover。其它图片可以不管。
		    // 查找所有封面图，迭代处理
		    $('.li img').each(function(){
		        // 找到为0就将isLoad设为false，并退出each
		        if(this.height === 0){
		            isLoad = false;
		            return false;
		        }
		    });
		    // 为true，没有发现为0的。加载完毕
		    if(isLoad){
		        clearTimeout(t_img); // 清除定时器
		        // 回调函数
		        callback();
		    // 为false，因为找到了没有加载完成的图，将调用定时器递归
		    }else{
		        isLoad = true;
		        t_img = setTimeout(function(){
		            isImgLoad(callback); // 递归扫描
		        },500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
		    }
		}
			

	})
</script>